<!-- event:'handleClick', value：'item'
textAlign:'文字对齐'
tableContentProp：'回显的数组' -->
<template>
	<view class="my-table">
		<view class="table-title-wrap">
			<view class="table-title" v-for="(item,index) in tableTitle"  :key ='index' :style="[{'textAlign':textAlign}]">{{item.titel}}
			</view>
		</view>
		<scroll-view class="table-content" scroll-y="true" :style="[{'height':scrollerHeight+'px'}]">
			<view class="data-tip" v-if="tableContentProp.length==0">暂无更多数据</view>
			<view class="table-content-wrap" v-for="(item,index) in tableContentProp" :key ='index' @click="handleClick(item)">
					<view class="content-sub pername" :style="[{'textAlign':textAlign}]">{{item['方案名称']}}</view>
					<view class="content-sub"  :style="[{'textAlign':textAlign}]">{{item['应发合计']}}</view>
					<view class="content-sub"  :style="[{'textAlign':textAlign}]">{{item['扣款合计']}}</view>
					<view class="content-sub"  :style="[{'textAlign':textAlign}]">{{item['实发合计']}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"my-table",
		data() {
			return {
				tableTitle:[
					{titel:'方案名称'},
					{titel:'应发'},
					{titel:'扣款'},
					{titel:'实发'}
				],
				scrollerHeight:'',
			};
		},
		methods:{
			handleClick(item){
				this.$emit('handleClick',item)
			},
			test(){
				console.log('成都')
			},
			getScrollHeight(){
				let winHeight
				uni.getSystemInfo({
					success(res) {
						winHeight = res.windowHeight
					}
				})
				uni.createSelectorQuery().selectAll('.table-content').boundingClientRect(rect=>{
					this.scrollerHeight = winHeight-rect[0].top
				}).exec()
			}
		},
		props:{
			textAlign:{
				type:String,
				default:'start'
			},
			tableContentProp:{
				type:Array
			}
		},
		created() {
		}
	}
</script>

<style lang="scss">
	.pername{
		width: 150rpx;
	}
	.data-tip{
		text-align: center;
		color: #949494;
		font-size: 28rpx;
		margin-top: 50rpx;
	}
	.my-table{
		display: flex;
		flex-direction: column;
		.table-title-wrap{
			display: flex;
			padding: 20rpx ;
			border-bottom: 2rpx solid #E5E5E5;
			.table-title{
				flex: 1;
				font-size: 24rpx;
				color: $text-color;
				font-weight: 400;
			}
		}
		
		.table-content{
			.table-content-wrap{
				display: flex;
				.content-sub{
					flex: 1;
					padding: 40rpx 0;
					font-weight: 500;
					font-size: 28rpx;
					color: $text-color;
					border-bottom: 2rpx solid #E5E5E5;
				}
			}
		}
	}
</style>
